$(function() {
    offcanvasMenu();
    burgerMenu();
});

//页面缩小时，出现汉堡按钮
var offcanvasMenu = function() {
    $('#page').prepend('<div id="gtco-offcanvas" />');
    $('#page').prepend('<a href="#" class="js-gtco-nav-toggle gtco-nav-toggle gtco-nav-white"><i></i></a>');

    //复制 .menu-1 > ul 里面的元素
    var clone1 = $('.menu-1 > ul').clone();
    $('#gtco-offcanvas').append(clone1);

    //find()获得当前元素集合中每个元素的后代，这里是"<li>"的后代
    $('#gtco-offcanvas .has-dropdown').addClass('offcanvas-has-dropdown');
    $('#gtco-offcanvas')
        .find('li')
        .removeClass('has-dropdown');

    // Hover手机下拉菜单
    // 当鼠标指针穿过（进入）被选元素时，会发生 mouseenter() 事件。
    $('.offcanvas-has-dropdown').mouseenter(function() {
        var $this = $(this);
        $this
            .addClass('active')
            .find('ul')
            .slideDown(500, 'easeOutExpo'); //动画显示“我的”里面的内容
    }).mouseleave(function() {
        var $this = $(this);
        $this
            .removeClass('active')
            .find('ul')
            .slideUp(500, 'easeOutExpo');
    });

    //当浏览器窗口变化时的行为
    $(window).resize(function() {
        //移除一下
        if ($('body').hasClass('offcanvas')) {
            $('body').removeClass('offcanvas');
            $('.js-gtco-nav-toggle').removeClass('active');
        }
    });
};

//手机端的汉堡按钮，点击无效果
var burgerMenu = function() {
    $('body').on('click', '.js-gtco-nav-toggle', function(event) {
        var $this = $(this);

        //切换效果
        if ($('body').hasClass('overflow offcanvas')) {
            $('body').removeClass('overflow offcanvas');
        } else {
            $('body').addClass('overflow offcanvas');
        }
        $this.toggleClass('active'); //如果不存在则添加类，如果已设置则删除之。这就是所谓的切换效果。
        event.preventDefault(); //取消事件的默认动作。
    });
};

